<template>
	<view class='tabbar'>
		<view class='tab' v-for="(item,index) in tabbarList" :key='index' @tap='navigatorTo(item.pagePath)'>
			<image v-if=' item.pagePath === cureentPage ' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class='text'>{{item.text}}</view>
		</view>
	</view>
</template>

<script setup>
	import { getCurrentInstance,inject} from 'vue'
	import {
		ref,
		reactive
	} from "vue"
	const navigateTo = inject('navigateTo') // 赋值方法
	const props = defineProps({
		cureentPage: {
			type: String,
			default: 'index'
		},
	})
	const tabbarList = reactive([{
			"pagePath": "index",
			"iconPath": "/static/tabbar/index.png",
			"selectedIconPath": "/static/tabbar/indexSelected.png",
			"text": "首页"
		},
		{
			"pagePath": "list",
			"iconPath": "/static/tabbar/list.png",
			"selectedIconPath": "/static/tabbar/listSelected.png",
			"text": "分类"
		},
		{
			"pagePath": "cart",
			"iconPath": "/static/tabbar/shop.png",
			"selectedIconPath": "/static/tabbar/shopSelected.png",
			"text": "购物车"
		},
		{
			"pagePath": "my",
			"iconPath": "/static/tabbar/my.png",
			"selectedIconPath": "/static/tabbar/mySelected.png",
			"text": "我的"
		}
	])
	const internalInstance = getCurrentInstance()
	const navigatorTo = (e) => {
		if (e === 'cart' || e === 'my') {
			navigateTo({
				url: `../../pages/${e}/${e}`,
				animationType:"fade-in",
				animationDuration:0
			})
		} else {
			uni.redirectTo({
				url: `../../pages/${e}/${e}`
			})
		}
	}
</script>

<style scoped>
	.tabbar {
		border-top: 2rpx solid #636263;
		background-color: #FFFFFF;
		z-index: 9999;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	image {
		width: 40rpx;
		height: 40rpx;
	}

	.text {
		padding: 10rpx 0;
		font-size: 24rpx;
	}
</style>